<template>
  <div>
    <p>Dashboard </p>
    <p>父组件必须有一个 路由出口，负责显示子路由的内容</p>

    <router-view></router-view>

    <h1>
      <p>dashboard-store {{count}} -state</p>
     <p>您的余额为：{{money}} -getters</p> 

    <button @click="inc">increase</button>


    
    <button @click="incAsync">increaseAsync</button>
    </h1>

    
  </div>
</template>

<script >
//具名方法 导出 加 大括号
//mapState,mapGetters 他们时对象 要在 computed解构
//mapMutations,mapActions 她两啊是方法 要在methods解构
  import {mapState,mapGetters,mapMutations,mapActions} from 'vuex';
  
  export default {
    methods: {
      ...mapMutations(['increase']),
      ...mapActions(['increaseAsync']),
      inc() {
        // this.$store.state.count +=1; ？？这样也可以 修改？？？

        this.$store.commit('increase') //执行 store的mutation的修改方法

        //使用帮助方法后
        this.increase()
      },
      incAsync() {
        
        console.log('异步 actions');
        this.$store.dispatch('increaseAsync');
        console.log('异步 actions 222222');

        //使用帮助方法后
        this.increaseAsync()
      },
      
    },
    computed: {
      //mapState是一个函数，会返回一个对象，
      //下面返回的时： {count: this.$store.state.count} 再将对象解构
      ...mapState(['count']),
      ...mapGetters(['money'])
    }
  }
</script>

<style lang="scss" scoped>

</style>